<template>
  <div class="user-center-container">
    <div class="user-sidebar">
      <div class="user-avatar">
        <AvatarImg :size="120" :src="userInfo.avatarUrl"/>
        <h3>{{ userInfo.username }}</h3>
      </div>
      <el-menu
          :default-active="activeMenu"
          class="user-menu"
          @select="handleMenuSelect"
      >
        <el-menu-item index="account">
          <el-icon><User /></el-icon>
          <span>账号管理</span>
        </el-menu-item>
        <el-menu-item index="history">
          <el-icon><VideoCamera /></el-icon>
          <span>观看记录</span>
        </el-menu-item>
        <el-menu-item index="login-history">
          <el-icon><Clock /></el-icon>
          <span>登录历史</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="user-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { User, VideoCamera, Clock } from '@element-plus/icons-vue'
import { userInform } from '@/stores/userInform'
import AvatarImg from "@/components/AvatarImg.vue";

const route = useRoute()
const router = useRouter()

const activeMenu = ref('account')

const userInfo = userInform()

onMounted(() => {
  const currentPath = route.path.split('/').pop()
  if (['account', 'history', 'login-history'].includes(currentPath)) {
    activeMenu.value = currentPath
  }
})

const handleMenuSelect = (index) => {
  router.push(`/user/${index}`)
}
</script>
<style>
.footer{
  margin-top: 0 !important;
}
</style>
<style scoped>
.user-center-container {
  display: flex;
  min-height: calc(100vh - 60px);
  background-color: #f5f5f5;
}

.user-sidebar {
  width: 220px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-avatar {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-menu {
  border-right: none;
}

.user-content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  margin: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
